<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue周末班</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="item,index in data">
            <div
                @click.prevent="show(index)"
            >{{item.title}}</div>
            <div v-show="showIndex == index">
                <p v-for="option in item.list">{{option.tile}}</p>
            </div>
        </div>
    </div>
    <script>

        let data = [
            {
                title:'第一个',
                list:[
                    {
                        tile:'111111'
                    },
                    {
                        tile:'2222222'
                    },
                    {
                        tile:'33333333'
                    }
                ]
            },
            {
                title:'第二个',
                list:[
                    {
                        tile:'aaaaaaaa'
                    },
                    {
                        tile:'bbbbbb'
                    },
                    {
                        tile:'ccccccc'
                    }
                ]
            },
            {
                title:'第三个',
                list:[
                    {
                        tile:'uuuuuuuuu'
                    },
                    {
                        tile:'ttttttttt'
                    },
                    {
                        tile:'fffffffff'
                    }
                ]
            },
        ]

        let vm = new Vue({
            el:'#app',
            data:{   // 数据放到这里
                data,
                showIndex: -1,
            },
            methods:{  //  模板里的方法， 统一定义在这里
                show(id){
                    this.showIndex = this.showIndex == id ? -1 : id;
                }
            }

        })
    </script>
</body>
</html>